<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery制作Loading动画特效</title>

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #F5FAFD;
            padding: 50px 0 0 0;
        }

        .mvBox {
            height: 15px;
            background: #F5FAFD url(images/test2.jpg) no-repeat left center;
            width: 471px;
            position: relative;
            padding: 0 30px;
            margin: 0 auto;
        }

        .mvBtn {
            position: absolute;
            left: 50px;
            top: 0;
        }

        .mvTxt {
            height: 50px;
            line-height: 50px;
            width: 531px;
            text-align: center;
            font-size: 30px;
            color: #29B6FF;
            font-family: Arial;
            margin: 0 auto;
        }
    </style>

    <script type="text/javascript" src="../../js/jquery.min.js"></script>

</head>
<body>


<div class="mvTxt">Loading<span class="mvSq" style="color: rgb(41, 182, 255);">.</span><span class="mvSq"
                                                                                             style="color: rgb(41, 182, 255);">.</span><span
        class="mvSq" style="color: rgb(245, 250, 253);">.</span></div>
<div class="mvBox">
    <img class="mvBtn" src="images/test1.jpg" style="left: 257px;">
</div>

<script language="javascript">
    var delVal = 50;

    function autoMove() {
        delVal++;
        if (delVal > 400) {
            delVal = 50;
        }
        $(".mvBtn").css("left", delVal);
    }

    setInterval(autoMove, 8);
    var deNum = 0;

    function autoTsq() {
        $(".mvSq").css("color", "#F5FAFD");
        setTimeout(function () {
            $(".mvSq").eq(0).css("color", "#29B6FF")
        }, 0);
        setTimeout(function () {
            $(".mvSq").eq(1).css("color", "#29B6FF")
        }, 500);
        setTimeout(function () {
            $(".mvSq").eq(2).css("color", "#29B6FF")
        }, 1000);
    }

    setInterval(autoTsq, 1500);
</script>


</body>
</html>